<template>
	<div class="login">
		<loginhead></loginhead>
		<!-- 3.0 输入框 -->
		<Myinput v-model="user.username" placeholder="用户名 / 手机号" :rules="namerules" msg="手机号输入不合法"></Myinput>
		<Myinput v-model="user.password" placeholder="密码" type="password" :rules="pwdrules" @keN="loginFn"></Myinput>
		<!-- 4.0 一个提示 -->
		<div class="tips">
			没有账号?
			<router-link to="/register">去注册</router-link>
		</div>
		<!-- 5.0 登录按钮 -->
		<Mybtn type="danger" @btnN="loginFn">登陆</Mybtn>
	</div>
</template>
<script>
// 自定义组件使用步骤：  新建/导入/注册/使用
import {userLoginAPI} from "@/apis/user";
import Mybtn from "@/components/Mybtn";
import Myinput from "@/components/Myinput";
import loginhead from "@/components/loginhead.vue";
import {setToken} from "@/utils/localData";
import {nrules, prules} from "@/utils/RegExp";
export default {
	data() {
		return {
			user: {
				// 为了方便测试，可以把用户名写到这里，注意，项目上线时，记得变回空字符串
				username: this.$route.query.username ? this.$route.query.username : "",
				password: "",
			},
			// namerules: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$|^1\d{4,5}$|^[a-zA-Z]\w{2,10}$/,
			// pwdrules: /^[a-zA-Z0-9]\w{2,17}$/,
			namerules: nrules,
			pwdrules: prules,
		};
	},
	components: {
		Mybtn,
		Myinput,
		loginhead,
	},
	methods: {
		async loginFn() {
			// 登录按钮点击时也需要用正则校验
			if (this.namerules.test(this.user.username) && this.pwdrules.test(this.user.password)) {
				// 校验通过就发送请求登录
				const res = await userLoginAPI(this.user);
				// console.log(res);
				const {message} = res.data;
				if (res.data.message === "登录成功") {
					// 提取 token
					const {
						token,
						user: {id},
					} = res.data.data;
					setToken(token); // 调用封装后的 token 方法
					// localStorage.setItem("hmttToken", token);// 保存到本地存储中，后续用户信息中心需要用到

					// 成功提示 success()
					this.$toast.success({
						message: message,
						duration: 1000,
						onClose: () => {
							// 跳转到个人中心页，并传递 id 参数
							if (this.$route.query.from) {
								// console.log(this.$route.query.from.split("#")[1]);
								this.$router.push({
									path: this.$route.query.from.split("#")[1],
									query: {
										userid: id,
									},
								});
							} else {
								this.$router.push({
									name: "index",
									query: {
										id: id,
									},
								});
							}
						},
					});
				} else {
					this.$toast.fail("用户名或者密码错误"); // 失败提示 fail()
				}
			} else {
				// alert("用户名或密码校验失败");
				this.$toast({
					message: "请输入正确的用户名和密码",
				});
			}
		},

		// :value="username" @inputN="inputFn"  换成v-model
		// inputFn(name) {
		// 	this.username = name;
		// 	console.log(this.username);
		// },
	},
};
</script>
<style scoped lang="less">
.tips {
	padding: 15px 30px;
	text-align: right;
	font-size: 14px;
	a {
		color: rgb(0, 153, 255);
	}
}
</style>
